<template>
  <div class="bg">
    <div class="crumbs crumbs-register">
      <el-breadcrumb separator="/" class="register-title">
        <el-breadcrumb-item
          ><i class="el-icon-setting"></i>注册</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="userContent">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="name" label="用户名称">
          <el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item prop="pass" label="密码">
          <el-input
            v-model="form.pass"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkPass" label="确认密码">
          <el-input
            v-model="form.checkPass"
            type="password"
            placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机">
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="birth" label="出生日期">
          <el-col :span="24">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item> -->
        <el-form-item prop="sex" label="性别">
          <el-select
            class="select-sex"
            v-model="form.sex"
            placeholder="请选择性别"
          >
            <el-option label="男" value="man"></el-option>
            <el-option label="女" value="woman"></el-option>
          </el-select>
        </el-form-item>
        <el-upload
          ref="imageUpload"
          :multiple="false"
          :on-success="imageSuccess"
          :on-error="imageFail"
          :on-change="updateImage"
          :limit="1"
          :auto-upload="false"
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
          :action="imageUrl"
        >
          <el-button size="small" type="primary">点击上传人脸照片</el-button>
        </el-upload>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">确定</el-button>
          <el-button @click="onCancle()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addUser } from "@/api/userInfo";
import axios from "axios";
import Util from "../../api/utils";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.checkPass !== "") {
          this.$refs.form.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.pass) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else if (!Util.emailReg.test(this.form.email)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!Util.phoneReg.test(this.form.phone)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      imageUrl: "http://127.0.0.1:5000/saveImg",
      imageData: null,
      form: {
        name: "",
        pass: "",
        checkPass: "",
        email: "",
        phone: "",
        // birth: "",
        sex: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        email: [{ validator: validateEmail, trigger: "blur" }],
        phone: [{ validator: validatePhone, trigger: "blur" }],
        // birth: [
        //   {
        //     required: true,
        //     message: "请输入出生日期",
        //     type: "date",
        //     trigger: "blur",
        //   },
        // ],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
      },
    };
  },
  methods: {
    imageSuccess(res, file, fileList) {
      console.log("图片上传成功 ", res);
      console.log(file);
      console.log(fileList); // 这里可以获得上传成功的相关信息
    },
    imageFail(err, file, fileList) {
      console.log("文件上传失败", err);
    },
    updateImage(file) {
      this.imageData = file;
    },
    onSubmit(formName) {
      const self = this;
      self.$refs[formName].validate((valid) => {
        if (valid) {
          addUser({
            email: self.form.email,
            phone: self.form.phone,
            faceurl: self.form.faceurl,
            sex: self.form.sex,
            username: self.form.name,
            password: self.form.pass,
          }).then((response) => {
              let fd = new FormData();
              console.log(self.imageData.raw)
              fd.append("image", self.imageData.raw);
              fd.append("id", response);
              axios
                .post(
                  "http://127.0.0.1:5000/saveImg",
                  // 跨域条件
                  fd,
                  {
                    "Content-Type":
                      "application/x-www-form-urlencoded; charset=UTF-8; multipart/form-data",
                    "X-Requested-With": "XMLHttpRequest",
                  }
                )
                .then(function () {
                  console.log(response + "注册成功");
                  self.$router.push("/login");
                });
            })
            .then(function (error) {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    onCancle() {
      this.$router.push("/login");
    },
    getDateTimes(str) {
      var str = new Date(str);
      return str;
    },
  },
};
</script>

<style>
.bg {
  background-color: rgba(200, 235, 255, 0.424);
}

.crumbs-register {
  background-color: #324157;
  height: 50px;
  line-height: 50px;
  margin-bottom: 40px;
}
.register-title {
  line-height: 50px;
  margin: 0 auto;
  width: 50px;
  font-size: 16px;
}
.userContent {
  width: 400px;
  margin: 0 auto;
}
.select-sex {
  width: 320px;
}
</style>